<template>
    <s-ripple class="item" @click="router.push('/tools/youdao')">
        <img src="../assets/youdao.ico" alt="">
        <div class="title">有道翻译</div>
    </s-ripple>
    <s-ripple class="item" @click="router.push('/tools/renjiao')">
        <img src="../assets/renjiao.png" alt="">
        <div class="title">人教社教材</div>
    </s-ripple>
    <s-ripple class="item" @click="ipcRenderer.send('on_link','https://zidian.gushici.net/')">
        <img src="../assets/xhzd.png" alt="">
        <div class="title">新华字典</div>
    </s-ripple>

</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
import { useIpcRenderer } from "@vueuse/electron";
const ipcRenderer = useIpcRenderer();
</script>

<style scoped>
.item {
    width: 120px;
    height: 130px;
    margin-left: 10px;
    margin-top: 10px;
    border-radius: 10px;
}

.item img {
    width: 50%;
    border-radius: 9999px;
    margin-left: 25%;
    margin-top: 10px;
}

.item .title {
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}
</style>